<template>
	<view class="page-content">
		<custom-navbar pageTitle="客户列表">
			<template v-slot:searchForm>
				<view class="searchMain">
					<view class="searchInput">
						<up-input placeholder="请输入内容" border="none" prefixIcon="search"
							:customStyle="{ backgroundColor: '#fff', height: '70rpx', paddingLeft: '10px' }"
							v-model="params.enterpriseName" @change="change"></up-input>
					</view>
					<view class="selectList">
						<view class="zlcSelect">
							<zlc-select v-model="params.type" label="类型" :showOptionsLabel="!!params.type"
								:options="enterpriseList_data" keyName="value" labelName="text"
								@change="getList('reload')">

							</zlc-select>
						</view>
						<view class="zlcSelect customSelect">
							<view class="text" @click="show = true">
								<text v-if="!params.province">办公地</text>
								<text v-else>{{ params.province }}</text>
							</view>
							<view class="icon">
								<i class="iconfont icon-xiajiantou zlcIcon" v-if="!params.province"></i>
								<up-icon name="close-circle-fill" size="30rpx" v-else
									@click.stop.self="resetProvince"></up-icon>
							</view>
						</view>
						<view class="zlcSelect">
							<zlc-select v-model="params.deptId" label="对接公司"
								:showOptionsLabel="!!params.company" :options="deptList_data" keyName="deptId"
								labelName="deptName" @change="getList('reload')">

							</zlc-select>
						</view>
					</view>
				</view>
			</template>
		</custom-navbar>
		<view class="list">
			<scroll-view class="scroll-view_H" scroll-y="true" refresher-enabled="true" :refresher-triggered="triggered"
				@scrolltolower="loadMore" @refresherrefresh="refresherrefresh">
				<view class="item" v-for="(item, index) in listData" :key="index">
					<custom-card :projectData="item" :contactTitleList="contactTitleList_data"
						:enterpriseList="enterpriseList_data"></custom-card>
				</view>
			</scroll-view>
		</view>

		<!-- 悬浮球 -->
		<movable-area class="movable-area" :style="{ 'height': `calc(100% - 500rpx)` }" v-if="hasPermission('miniapp:enterprise:add')">
			<movable-view class="movable-view" :x="10000" :y="200" direction="vertical">
				<view class="main">
					<view class="iconBox" @click="linkToAddPage">
						<img src="@/static/common/userIcon.png" alt="" class="icon" />
					</view>
				</view>
			</movable-view>
		</movable-area>

		<up-picker :closeOnClickOverlay="true" keyName="name" valueName="code" :show="show" ref="uPickerRef"
			:columns="columns" :defaultIndex="addressComputed" @close="show = false" @cancel="show = false"
			@change="changeHandler" @confirm="confirmHandler"></up-picker>
			
			<custom-tabbar> </custom-tabbar>
	</view>
</template>

<script lang="ts" setup>
	import { ref, onMounted, watch } from "vue"
	import { onShow } from "@dcloudio/uni-app";
	import { debounce } from 'uview-plus';
	//组件
	import zlcSelect from "@/components/zlcSelect/index.vue"
	import piaoyiCityPicker from "@/uni_modules/zlcCityPicker_2/piaoyi-cityPicker.vue"
	import customTabbar from "@/components/customTabbar/index.vue"
	import customNavbar from "@/components/customNavbar/index.vue"
	import customCard from "./components/customCard/index.vue"
	//接口
	import { provinceCity } from "@/api/common/index"
	//hooks
	import useAppHookds from "@/appHooks/useViewModel"
	import useViewModel from './hooks/useViewModel'
	const {
		params,
		getList,
		listData,
		loadMore,
		refresherrefresh,
		triggered
	} = useViewModel()
	
	let {
		getContactTitleList,
		contactTitleList_data,
		getEnterpriseList,
		enterpriseList_data,
		getDeptList,
		deptList_data,
		hasPermission
	} = useAppHookds()

	//输入框输入事件
	let change = (e : string) => {
		debounce(() => { params.value.enterpriseName = e, getList('reload') }, 800)
	}
	
	//省市区
	//获取所有省
	let getProvinceCity = (code : string) : Promise<any[]> => {
		return new Promise((resolve, reject) => {
			provinceCity(code).then(res => {
				let { rows } = res as any
				resolve(rows)
			}).catch(() => {
				reject()
			})
		})
	
	}
	
	//省市区选择器
	let uPickerRef = ref()
	let show = ref<boolean>(false)
	let columns = ref<any[]>([[], []])
	let init = () : Promise<void> => {
		return new Promise((resolve, reject) => {
			getProvinceCity('0').then((rows : any[]) => {
				columns.value = [rows, []]
				uPickerRef.value.setColumnValues(0, rows)
				let { code } = rows[0]
				getProvinceCity(code).then(res => {
					columns.value = [columns.value[0], res]
					uPickerRef.value.setColumnValues(1, res)
					resolve()
				}).catch(() => {
					reject()
				})
			}).catch(() => {
				reject()
			})
		})
	}
	let addressComputed = ref<number[]>([])
	watch(() => params.value.province, async (newValue, _oldValue) => {
		if (newValue) {
			let [name1, name2] = newValue.split('/')
			let index1 = columns.value[0].findIndex(i => i.name == name1)
			if (index1 != -1) {
				let index2: number = 0
				let { code } = columns.value[0][index1]
				let res = await getProvinceCity(code)
				uPickerRef.value.setColumnValues(1, res)
					index2 = res.findIndex(i => i.name == name2)
					setTimeout(() => {
						uPickerRef.value.setIndexs([index1, index2])
					}, 500)
			}
	
	
		}
	})
	let changeHandler = (e) => {
		let [{ code }] = e.value
		getProvinceCity(code).then(res => {
			columns.value.splice(1, 1, res)
		})
	}
	let confirmHandler = (e) => {
		let [{ name }, { name: name2 }] = e.value
		params.value.province = name + "/" + name2
		show.value = false
		getList('reload')
	}
	let resetProvince = () => {
		params.value.province = ''
		init()
		setTimeout(() => {
			uPickerRef.value.setIndexs([0, 0])
		}, 500)
		getList('reload')
	}

	//前往新增项目页面
	let linkToAddPage = () : void => {
		uni.navigateTo({
			url: '/pages/addEnterprise/index'
		})
	}
	
	
	onMounted(() => {
		getContactTitleList()
		getEnterpriseList()
		getDeptList()
	})


	onShow(() => {
		init()
		getList('reload')
	})
</script>

<style lang="scss" scoped>
	.page-content {
		// width: 100%;
		// height: 100%;
		padding-top: 360rpx;
		box-sizing: border-box;
		overflow: hidden;
		background: #f6f6f8;
		height: calc(100% - 140rpx);
		box-sizing: border-box;
		overflow: hidden;

		.searchMain {
			padding: 20rpx 40rpx;
			box-sizing: border-box;
			height: 100%;
			display: flex;
			flex-direction: column;
			justify-content: space-between;

			.selectList {
				width: 100%;
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: space-between;

				.zlcSelect {
					width: calc(100% / 3);

					&.customSelect {
						display: flex;
						flex-direction: row;
						align-items: center;
						justify-content: center;

						.text {
							width: fit-content;
							max-width: calc(100% - 40rpx);
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
							font-size: 28rpx;
						}

						.icon {
							width: 40rpx;
						}
					}
				}
			}
		}

		.list {
			height: 100%;
			
			overflow-y: auto;

			.scroll-view_H {
				height: 100%;
			}
		}

		.movable-area {
			width: 100%;
			position: fixed;
			pointer-events: none;
			top: 360rpx;

			.movable-view {
				width: fit-content;
				height: fit-content;
				pointer-events: auto;

				.main {
					background: #fff;
					border-radius: 50%;
					overflow: hidden;

					.iconBox {
						width: 100rpx;
						height: 100rpx;
						display: flex;
						flex-direction: row;
						align-items: center;
						justify-content: space-evenly;
						border-radius: 50%;
						overflow: hidden;

						.icon {
							width: 100rpx;
							height: 100rpx;
						}
					}
				}

			}
		}
	}
</style>